<template>
  <div class="block index_edit">
    <div class="block-title">
      <div class="block-options pull-right">
        <a href="javascript:void(0)" class="btn btn-effect-ripple btn-default toggle-bordered enable-tooltip"
           data-toggle="button" title="Toggles .form-bordered class" @click="returnBack">返回列表</a>
      </div>
      <h2>修改插件</h2>
    </div>
    <form action="" method="post" class="form-horizontal form-bordered">
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-name">插件名称</label>
        <div class="col-sm-4">
          <input type="text" v-model.trim="Info.name"
                 id="example-input-name" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写插件名称..." @input="$v.Info.name.$touch();">
          <span v-if="!$v.Info.name.required &&  Info.name!=''">请填插件名称</span>
          <span v-if="!$v.Info.name.minLength && Info.name!=''">抱歉插件名称必须5位</span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-3 control-label">是否禁用</label>
        <div class="col-md-9">
          <label class="radio-inline" for="example-inline-radio1">
            <input type="radio"
                   id="example-inline-radio1" v-model="Info.status"
                   value="1" name="example-inline-radios">显示                    </label>
          <label class="radio-inline" for="example-inline-radio2">
            <input type="radio"
                   id="example-inline-radio2" v-model="Info.status"
                   value="0" name="example-inline-radios">隐藏                    </label>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label"
               for="example-input-uri">插件地址</label>
        <div class="col-sm-4">
          <input type="text" v-model.trim="Info.uri"
                 id="example-input-uri" name="example-input-small"
                 class="form-control input-sm" placeholder="请填写插件地址..." @input="$v.Info.uri.$touch();">
          <span v-if="!$v.Info.uri.required &&  Info.uri!=''">请填插件地址</span>
          <span v-if="!$v.Info.uri.minLength && Info.uri!=''">抱歉插件地址必须5位</span>
        </div>
      </div>
      <div class="form-group form-actions">
        <div class="col-sm-9 col-sm-offset-3">
          <button type="button" class="btn btn-effect-ripple btn-primary" @click="update_data($v.Info)">插件修改</button>
        </div>
      </div>
    </form>
    <transition name="loading" mode="out-in">
      <loading v-if="loadAt"></loading>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../../static/http/http';
  import {mapState, mapMutations} from 'vuex'
  import {required, minLength, between, email} from 'vuelidate/lib/validators'
  import loading    from '../../components/comment/loading/loading';
  const ERROR_STATUS = 1001;
  export default{
    name: "index_edit",
    props: {
      indexInfo: {type: Object, required}
    },
    data(){
      return {
        Info: {
          name: '', uri: '', status: 1,
        }
      }
    }, created(){
      this.Info = {...this.indexInfo}
    },
    validations: {
      Info: {
        name: {required, minLength: minLength(6)},
        status: {required, minLength: minLength(6)},
        uri: {required, minLength: minLength(6)},
      }
    }, computed: {
      ...mapState({
        loadAt: 'loading'
      })
    }, methods: {
      ...mapMutations({
        set_loadAt: 'set_loading'
      }), update_data(validate){
       /* validate.$touch();  //  全面验证
        if (validate.$error) {
          return false;
        }*/// 验证成功位false验证失败为true false才能进行下一步的验证
        this.set_loadAt({code: 100, meta: true});
        let data = {};
        let id = this.Info.id;
        data.name = this.Info.name, data.status = this.Info.status, data.uri = this.Info.uri, this.apiPut(`/api/admin/index/update/id/${id}`, data).then((response) => {
          let response_data = response.data.list;
          let error_code = response.data.status;
          if (error_code !== ERROR_STATUS) {
            this.changeInfo();
            this.set_loadAt({code: 120, meta: false, custom_info: response.data.info});
          }
        }).catch((response) => {
          this.set_loadAt({code: 102, meta: false});
        })
      }, returnBack(){
        this.$emit('CloseEdit')
      }, changeInfo(){
        let keys = Object.keys(this.Info);
        keys.forEach(index => this.$set(this.indexInfo, index, this.Info[index]));
      }
    }, mixins: [http],
    components: {loading}
  }
</script>
<style type="stylus" scoped>
  .loading-enter-active, .loading-leave-active {
    transition: all .4s;
  }

  .loading-enter, .loading-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }

  .block {
    position: fixed;
    top: 50px;
    left: 220px;
    z-index: 100;
    right: 0;

  }
</style>
